<template>
    <p>组合式api</p>
    <p>a:   {{ a }}</p>
    <p>name:   {{ name }}</p>

    <p>reactive=======</p>
    <p>obj:{{ obj }}</p>
    <p>obj.name : {{ obj.name }}</p>
    <p>obj.age :{{ obj.age }}</p>

    <p>arr:{{ arr }}</p>
    <p>arr[0]:{{ arr[0] }}</p>

    <p>computed</p>
    <p>aAddFive:{{ aAddFive }}</p>
    <p>objAgeAddFive:{{ objAgeAddFive }}</p>
    
    <button @click="aAddOne">a+1</button>
    <button @click="aAddTwo">a+2</button>

<SonDemo foo="hello world"  :age="a"/>
</template>

<script setup>
import {computed, reactive,ref,watch} from 'vue'
import SonDemo  from './SonDemo.vue'

const a = ref(0)
const name = ref('tom')

console.log(a);
console.log(a.value);

const testObj = ref({
    name:'tom',
    age:12
})

console.log(testObj.value.name);
const obj = reactive({
    name:'tom',
    age:12
})

const arr = reactive([1,2,3,4])

//computed
const aAddFive = computed(()=>{
    return a.value +5
})
const objAgeAddFive = computed(()=>{
    return obj.age +5
})
function aAddOne(){
    a.value++
}
const aAddTwo = () =>{
    a.value +=2
}
watch(a,(newVal,oldVal)=>{
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})
</script>